<template>
  <view class="container">
    <view class="header">
      <view class="header-top">
        <view class="header-top-avatar">
          <image src="../../static/avther.png" mode="aspectFill"></image>
        </view>
        <view class="header-top-title">
          <view>{{ userInfo.member_level_name || '-'}}</view>
          <view>{{ userInfo.mobile || '-' }}</view>
        </view>
        <image src="https://www.xmxxs.top/upload/1/common/images/20240607/20240607031854171774473498814.png"
          mode="aspectFill" class="avatar-vip"></image>
      </view>
      <view class="header-notice">
        <image src="@/static/bgVip.png" mode="aspectFill"></image>
        <view style="margin-left: 10rpx;">会员剩余{{ userInfo.number_times || 0 }}次数</view>
      </view>
    </view>
    <view class="box">
      <view class="box-item" v-for="(item, index) of packageContentList" :key="index" @click="orderCreate(item)">
        <view class="box-item-head">
          <text style="margin-left: 20rpx;">{{ item.goods_name }}</text>
        </view>
        <view class="box-item-main">
          <view class="box-item-main-money">
            <text style="font-size: 28rpx;">&yen;</text> {{ item.price }}
            <view class="box-item-main-text-h1">
              <view>次数: {{ item.introduction }}</view>
            </view>
          </view>
          <view class="box-item-main-text">
            <view class="box-item-main-text-pay">
              充值
            </view>
          </view>
        </view>
      </view>

      <view class="poster">
        <view class="details" v-html="packageContent"></view>
      </view>
    </view>
    <Tabbar cureentPage='member'></Tabbar>
  </view>
</template>

<script>
  import Tabbar from '@/components/common/Tabbar.vue'
  import request from "../../api/request";
  export default {
    data() {
      return {
        token: null,
        packageContentList: [],
        currentMode: 0,
        setMeal: null,
        openid: null,
        userInfo: null,
        packageContent: null,
      }
    },
    components: {
      Tabbar
    },
    onLoad() {
      this.token = uni.getStorageSync('token')
      this.openid = uni.getStorageSync('openid');
      console.log('this.openid', this.openid);
      this.getPackageContent()
    },
    onShow() {
      this.getUserInfo()
    },
    methods: {
      handlerChange(val, index) {
        this.currentMode = index
        this.setMeal = val
      },
      getUserInfo() {
        const that = this
        request({
          url: '/kx/index/getUserInfo',
          data: {
            token: that.token
          },
          successCb: (res) => {
            this.userInfo = res.data.data
            uni.setStorageSync('userInfo', JSON.stringify(res.data.data))
          },
        });
      },
      orderCreate(val) {
        this.setMeal = val
        const that = this
        uni.showModal({
          title: '温馨提示',
          content: `是否确认支付充值金额${this.setMeal.price}元`,
          success({
            confirm
          }) {
            if (confirm) {
              uni.showLoading({
                title: '加载中..'
              })
              request({
                url: '/kx/order/formal_pay',
                data: {
                  token: that.token,
                  goods_id: that.setMeal.goods_id,
                  openid: that.openid,
                },
                successCb: (res) => {
                  // console.log(res)
                  let orderInfo = res.data.credential
                  uni.hideLoading()
                  uni.requestPayment({
                    provider: "wxpay",
                    appid: orderInfo
                      .appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                    nonceStr: orderInfo.nonceStr, // 随机字符串
                    package: orderInfo.package, // 固定值
                    prepayId: orderInfo.prepayId, // 统一下单订单号 
                    timeStamp: orderInfo.timeStamp, // 时间戳（单位：秒）
                    signType: orderInfo.signType, // 签名，这里用的 MD5/RSA 签名
                    paySign: orderInfo.paySign,
                    success(res) {
                      console.log('支付成功', res);
                      uni.$u.toast('支付成功')
                      that.getUserInfo()
                    },
                    fail(e) {
                      console.log('支付失败', e);
                      uni.$u.toast('支付失败')
                    }
                  })
                },
              });
            }
          }
        })
      },
      getPackageContent() {
        uni.showLoading({
          title: '加载中...'
        })
        request({
          url: '/kx/device/getPackageContent',
          data: {
            token: this.token,
          },
          successCb: (res) => {
            console.log('res123', res);
            this.packageContentList = res.data;
            this.setMeal = this.packageContentList[0]
            this.packageContent = this.packageContentList[0].goods_content
            uni.hideLoading()
          },
          failCb: (err) => {
            console.log(err)
            uni.$u.toast('系统繁忙')
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background: #F3F3F3;
    min-height: 100vh;
  }

  .header {
    width: 100%;
    border-radius: 40rpx;
    position: relative;

    &-top {
      position: relative;
      display: flex;
      align-items: center;
      padding: 34rpx 34rpx 12rpx 34rpx;

      .avatar-vip {
        position: absolute;
        right: 50rpx;
        bottom: -40rpx;
        width: 206rpx;
        height: 158rpx;
        background-size: 100%;
        z-index: 2;
      }

      &-avatar {
        width: 108rpx;
        height: 108rpx;
        object-fit: cover;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      &-title {
        margin-left: 24rpx;

        view {
          &:nth-child(1) {
            color: #3D3D3D;
            font-size: 28rpx;
          }

          &:nth-child(2) {
            color: #8D8D8D;
            font-size: 24rpx;
            line-height: 2;
          }
        }
      }
    }

    &-notice {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 670rpx;
      height: 72rpx;
      background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
      border-radius: 50rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #FFFFFF;
      font-weight: 500;

      image {
        width: 42rpx;
        height: 36rpx;
        background-size: 100%;
        margin-left: 38rpx;
      }
    }
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    width: 710rpx;
    margin: 0 auto;
    margin-top: 100rpx;

    &-item {
      width: 326rpx;
      height: 165rpx;
      margin: 10rpx;

      &-head {
        width: 100%;
        height: 55rpx;
        background-color: #E9F2FF;
        border-radius: 20rpx 20rpx 0 0;
        font-size: 24rpx;
        font-weight: 500;
        color: #3D3D3D;
        line-height: 55rpx;
      }

      &-main {
        width: 100%;
        height: 110rpx;
        border-radius: 0 0 20rpx 20rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;

        &-money {
          font-weight: 700;
          font-size: 48rpx;
          color: #FF8732;
          margin-left: 20rpx;
        }

        &-line {
          width: 2rpx;
          height: 39rpx;
          background: #3D3D3D;
          margin: 0 20rpx;
        }

        &-text {
          display: flex;

          &-h1 {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #3D3D3D;
            font-size: 20rpx;
          }

          &-pay {
            text-align: center;
            width: 80rpx;
            height: 36rpx;
            margin-top: 10rpx;
            margin-left: 10rpx;
            background: #FF8732;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            line-height: 36rpx;
            font-size: 20rpx;
            color: #fff;
          }
        }
      }
    }
  }

  .poster {
    width: 690rpx;
    height: 1308rpx;
    margin-bottom: 188rpx;
    margin-top: 20rpx;
    .details{
      text-align: center;
    }

    image {
      width: 100%;
      height: 100%;
      background-size: 100%;
    }
  }
</style>